<template>
  <!--<el-button color="#626aef" :dark="isDark" plain icon="Download" @click="handleOut"
    >导出</el-button
  >-->
    <el-tooltip class="item" effect="dark" content="刷新" placement="top">
    <el-button circle icon="Refresh" @click="update" />
  </el-tooltip>
    <el-table
      :data="tableData"
      border
    style="width: 95%; margin: 20px auto; border-radius: 8px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
    :header-cell-style="{
      background: '#337ecc !important',
      color: '#ffffff',
      border: 'none !important',
      textAlign: 'center',
    }"
    :span-method="(value) => rowSpanRulesHandler(value, tableData)"
    >
      <el-table-column prop="target" label="关键事项描述"  />
      <el-table-column prop="totalScore" label="O分值" width="100" />
      <el-table-column prop="keyResult" label="要求达成的目标" width="200" />
      <el-table-column prop="keyWeight" label="考核分数" width="100"/>
	  
	  <el-table-column prop="deptName" label="部门" width="180" />
	  <el-table-column prop="position" label="岗位" width="180" />
      <el-table-column prop="name" label="执行人员姓名" width="100"/>
      <el-table-column prop="ins" label="考核类型" width="200"/>
    </el-table>
</template>

<script setup>
import {ref, onMounted,onBeforeMount, reactive,watch} from "vue";
import {getPastList} from '@/api/okr'
import { ElMessage } from 'element-plus'

let empId=JSON.parse(localStorage.getItem('userInfo')).id
const tableData=ref()
onBeforeMount(()=>{
    getPastList({empId}).then(data=>{
        tableData.value=data.data;
    })
})

const update = () => {
    getPastList({empId}).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      tableData.value=data.data;
    } 
    else {
      ElMessage.error("更新失败");
    }
  });
};

const compareSingleAttrReturnColSpan = (row, compareAttr, index, tableData) => {
  let count = 0;
  let start = index;
  let multCompare = true;

  while (start < tableData.length && multCompare) {
    start++;
    count++;
    if (start <= tableData.length - 1)
      multCompare = row.okrId === tableData[start].okrId;
    else multCompare = row.okrId === tableData[start - 1].okrId;
  }
  start--; //退出循环后的 新起始行 index

  if (start < tableData.length) {
    tableData[index][`${compareAttr}_count`] = count; //将合并的行数存储在行数据中的一个特定属性中
  }

  if (index > 0 && count + 1 === tableData[index - 1][`${compareAttr}_count`]) {
    return [0, 0]; //不需要合并
  }
  return [count, 1];
};

const columns = [
  "target",
  "totalScore",
  "keyResult",
  "keyWeight",
  "deptName",
  "positionName",
  "name",
  "ins",
];
const rowSpanRulesHandler = ({ row, column, rowIndex, columnIndex }, data) => {
  if (
    columns[columnIndex] === "target" ||
    columns[columnIndex] === "totalScore" ||
    columns[columnIndex] === "keyResult" ||
    columns[columnIndex] === "ins"
  ) {
    const r = compareSingleAttrReturnColSpan(row, "emp_id", rowIndex, data);
    return r;
  }
};
</script>
<style lang="scss" scoped>
.chapter{
    width: 300px;
    height: 300px;
    background-image: url("@/assets/chapter.png");
    background-size: contain;
    position: absolute;
    top: 160px;
    right: 50px;
}
:deep(.my-label) {
  background:#005B99 !important;
  color: #fff !important;
}
:deep(.my-content) {
  background:#4e88ca !important;
  color: #fff !important;
}
.formWrapper{
    width: 100%;
    border: 2px solid #DCDFE6;
    margin: 20px 0;
    border-radius: 5px;
    .formTitle{
        height: 50px;
        font-weight: bold;
        color: #303133;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        border-bottom: #DCDFE6 1px solid;
    }

    .form{
        width: 800px;
        margin: 20px auto;
        border-radius: 5px;
        .title {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .title_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #337ECC;
                text-align: center;
                color: #fff;
                line-height: 50px;
                font-size: 20px;
            }
        }
        .centent {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .centent_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #79bbff;
                color: #fff;
                padding: 5px;
                line-height: 40px;
                text-align: center;
            }
        }
    }
    .button{
        width: 200px;
        height: 40px;
        margin: 10px auto;
        float: right;
    }
}
</style>
